// import { userInfo } from "@/data/mockData";

export function settingName() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  console.log(userInfo,'settingNamesettingNameoriginalNameContaineroriginalNameContainer');
  
  const originalNameContainer = document.querySelector(".mantine-1ac2abv");
  if(originalNameContainer){
    originalNameContainer.innerHTML = userInfo.nick
  }
  
  // if (originalNameContainer) {
  //   if (!originalNameContainer.querySelector(".my-setting-name-overlay")) {
  //     const nameOverlay = document.createElement("div");
  //     nameOverlay.setAttribute("class", "my-second-name-overlay");
  //     nameOverlay.setAttribute(
  //       "style",
  //       "position: absolute;\n" +
  //         "left: 0;\n" +
  //         "top: 0;\n" +
  //         "width: 100%;\n" +
  //         "height: 100%;\n" +
  //         "z-index: 10;\n" +
  //         "background-color: #fff;\n"
  //     );
  //     nameOverlay.innerHTML = userInfo.nick;
  //     originalNameContainer.style.position = "relative";
  //     originalNameContainer.appendChild(nameOverlay);
  //   }
  // }
}

export function settingAvatar() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const originalAvatarContainer = document.querySelector(".mantine-1jkf0rc");
  if (originalAvatarContainer) {
    if (
      !originalAvatarContainer.querySelector(`.my-setting-avatar-overlay`)
    ) {
      const overlay = document.createElement("img");
      overlay.setAttribute("class", `my-setting-avatar-overlay`);
      overlay.setAttribute(
        "style",
        "position: absolute;\n" +
          " left: 0;\n" +
          " top: 0;\n" +
          " width: 100%;\n" +
          " height: 100%;\n" +
          " z-index: 10;"
      );
      overlay.setAttribute("src", userInfo.avatar);
      originalAvatarContainer.style.position = "relative";
      originalAvatarContainer.appendChild(overlay);
    }
  }
}
